<template>
  <div>
    <el-container class="main-el-contarner">
      <el-main>
        <div class="kanbao-bigbox">
          <div class="righttop-search-box">
            <el-form
              :inline="true"
              :model="param"
              label-width="100px"
              @submit.native.prevent
            >
              <el-form-item label="选择状态：" label-width="90px">
                <el-select
                  v-model="param.warnStatus"
                  placeholder="选择状态"
                  :clearable="true"
                  size="small"
                  style="width: 150px"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option label="启用" value="1"></el-option>
                  <el-option label="禁用" value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="" label-width="10px">
                <el-input
                  placeholder="请输入关键字检索"
                  v-model="param.name"
                  size="small"
                  clearable
                  style="width: 350px"
                  @keyup.enter.native="onSearch"
                >
                  <i slot="prefix" class="el-input__icon el-icon-search"></i>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查找</el-button>
              </el-form-item>

              <el-form-item style="float: right">
                <el-button type="text" style="color: #18bc9c" @click="handleAdd"
                  ><i class="el-icon-plus"></i> 新增分类</el-button
                >
              </el-form-item>
            </el-form>
          </div>
          <div class="container-box">
            <el-table
              :data="datas"
              border
              stripe
              max-height="480px"
              :header-cell-style="{
                background: '#cfcfcf',
                color: '#000000',
                'text-align': 'center',
              }"
              :cell-style="{ 'text-align': 'center' }"
              style="width: 100%"
              size="small"
              @selection-change="selectionChange"
            >
              <el-table-column
                type="selection"
                header-align="center"
                width="60"
              ></el-table-column>
              <el-table-column prop="da" label="设备大类"> </el-table-column>
              <el-table-column prop="xiao" label="设备小类"> </el-table-column>
              <el-table-column prop="name" label="事件名称"> </el-table-column>
              <el-table-column prop="jcsb" label="监测设备"> </el-table-column>
              <el-table-column prop="zhi" label="值名称"> </el-table-column>
              <el-table-column prop="shijian" label="持续时间"> </el-table-column>
              <el-table-column prop="tiaojian" label="条件"> </el-table-column>
              <el-table-column prop="fazhi" label="阀值"> </el-table-column>
              <el-table-column prop="danwei" label="单位"> </el-table-column>
              <el-table-column prop="status" label="状态" width="150">
                <template slot-scope="scope">
                  <font v-if="scope.row.status == '1'">启用</font>
                  <font v-else-if="scope.row.status === '0'" style="color: #cccccc"
                    >禁用</font
                  >
                  <font v-else>/</font>
                </template>
              </el-table-column>

              <el-table-column fixed="right" label="操作" width="150">
                <template slot-scope="scope">
                  <el-button
                    @click="delClick(scope.row)"
                    type="text"
                    icon="el-icon-document"
                    style="color: #18bc9c; margin: 5px; padding: 0px"
                    >详情</el-button
                  >
                  |
                  <el-button
                    @click="editClick(scope.row)"
                    type="text"
                    icon="el-icon-edit"
                    style="color: #18bc9c; margin: 5px; padding: 0px"
                    >编辑</el-button
                  >
                </template>
              </el-table-column>
            </el-table>

            <div class="pagebox">
              <el-pagination
                @size-change="sizeChange"
                @current-change="currentChange"
                :current-page="param.pageNo"
                :page-sizes="[10, 30, 50, 100, 500]"
                :page-size="param.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="dataTotal"
              >
              </el-pagination>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SideHeader from "@/views/inc/SideHeader";
import Navlanmu from "@/views/inc/Navlanmu";
import LeftMenuMessage from "@/views/inc/LeftMenuMessage";
import { getDateTimes, numFormat, getDateWeek } from "@/utils/index.js";

export default {
  name: "Electricboard",
  components: { SideHeader, Navlanmu, LeftMenuMessage },
  data() {
    return {
      loadingdata1: false,
      isloading: false,
      param: { warnStatus: "", name: "", pageNo: 1, pageSize: 10 },
      datas: [
        {
          da: "远程抄表",
          xiao: "电表",
          name: "电耗超标",
          jcsb: "总表001",
          zhi: "总电耗",
          shijian: "0min",
          tiaojian: "大于",
          fazhi: "100",
          danwei: "kWH",
          status: "1",
        },
        {
          da: "环境监测",
          xiao: "温湿度传感器",
          name: "高温告警",
          jcsb: "设备组1",
          zhi: "温度值",
          shijian: "5min",
          tiaojian: "大于",
          fazhi: "40",
          danwei: "℃",
          status: "0",
        },
        {
          da: "环境监测",
          xiao: "温湿度传感器",
          name: "低温告警",
          jcsb: "设备组2",
          zhi: "温度值",
          shijian: "5min",
          tiaojian: "小于",
          fazhi: "18",
          danwei: "℃",
          status: "1",
        },
        {
          da: "环境监测",
          xiao: "温湿度传感器",
          name: "潮温告警",
          jcsb: "设备组3",
          zhi: "湿度值",
          shijian: "5min",
          tiaojian: "大于",
          fazhi: "70",
          danwei: "%",
          status: "1",
        },
        {
          da: "环境监测",
          xiao: "温湿度传感器",
          name: "潮温告警",
          jcsb: "设备组4",
          zhi: "湿度值",
          shijian: "5min",
          tiaojian: "小于",
          fazhi: "30",
          danwei: "%",
          status: "1",
        },
        {
          da: "环境监测",
          xiao: "空气质量传感器",
          name: "CO2浓度超标",
          jcsb: "设备组5",
          zhi: "CO2浓度",
          shijian: "5min",
          tiaojian: "大于",
          fazhi: "800",
          danwei: "ppm",
          status: "1",
        },
        {
          da: "环境监测",
          xiao: "空气质量传感器",
          name: "CO浓度超标",
          jcsb: "设备组6",
          zhi: "CO浓度",
          shijian: "5min",
          tiaojian: "大于",
          fazhi: "30",
          danwei: "ppm",
          status: "1",
        },
      ],
      dataTotal: 0,
    };
  },
  mounted() {
    //
  },
  created() {
    this.isloading = false;
  },
  methods: {
    nodeClick(type, data) {
      this.loadingdata1 = true;
      console.log("nodeClick", type, data);
      this.searchForm = data;
      this.getEnergyQushi();
      this.getEnergyDeptRanking();
      this.getEnergylevelCount();
    },
    handleAdd() {},
    // 数据搜索按钮
    onSearch() {
      this.param.pageNo = 1;
      this.getDatas();
    },
    // 复选框按钮
    selectionChange() {
      console.log("selectionChange");
    },
    indexMethod(index) {
      return (this.param.pageNo - 1) * this.param.pageSize + index + 1;
    },
    sizeChange(val) {
      this.param.pageSize = val;
      this.getDatas();
    },
    currentChange(val) {
      this.param.pageNo = val;
      this.getDatas();
    },
  },
};
</script>
<style>
.kanbao-bigbox .el-loading-spinner .el-loading-text {
  color: #666 !important;
}
</style>
<style scoped>
.el-main {
  padding: 0px !important;
}

.kanbao-bigbox {
  margin-top: 0px;
}
</style>
<style scoped>
.righttop-search-box {
  background: #f8f8f8;
  padding: 8px 20px 7px 20px;
  border-bottom: 1px solid #ececec;
  position: fixed;
  top: 0;
  width: calc(100% - 55px);
  z-index: 4;
}

.righttop-search-box .el-form-item {
  margin-bottom: 0px !important;
}

.container-box {
  padding: 10px;
  margin: 50px 0;
}

.pagebox {
  text-align: right;
  padding: 10px;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 100%;
  background-color: #ececec;
  z-index: 4;
}
</style>
